<extend name="./_base"/>

<block name="css">
    <style>
        html, body {
            min-height: 100%;
            height: 100%;

        }

        #logo h1 {
            font-size: 80px;
            padding: 60px;
            font-family: 微软雅黑;
            color: #666;
        }

        .search {
            position: absolute;
            top: 200px;
            left: 0;
            right: 0;
        }

        #code-search .input-text {
            height: 50px;
            font-size: 24px;
        }

        #search-btn {
            height: 50px;
            width: 160px;
            font-size: 24px;
            transition: all .5s linear;
        }

        #search-btn:hover {
            color: wheat;
        }

        #save-list {
            margin: 30px;
        }

        #save-list li {
            display: inline-block;
            margin: 0 20px;
        }

        #save-list span {
            font-size: 20px;
            line-height: 30px;
            width: 120px;
        }

        #save-list span {
            font-size: 20px;
            line-height: 30px;
            width: 100px;
        }


    </style>
</block>
<block name="content">

    <div id="logo" class="text-c">
        <h1>K v v 指 数</h1>
    </div>

    <div class="search container">

        <div class="text-c">
            <form id="code-search">
                <input type="text" class="input-text" style="width:480px" placeholder="请输入查询码,多个查询码以英文逗号隔开"
                       name="search">
                <button id="search-btn" type="submit" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i>
                    Kvv搜索
                </button>
            </form>
            <ul id="save-list">
                <!--<li>-->
                <!--<span class="label label-primary">123456</span>-->
                <!--</li>-->
                <!--<li>-->
                <!--<span class="label label-success">123456</span>-->
                <!--</li>-->
                <!--<li>-->
                <!--<span class="label label-danger">123456</span>-->
                <!--</li>-->
            </ul>
        </div>

        <div id="data-box">
            <div class="cl pd-5 bg-1 bk-gray mt-20 mb-20">
                <form id="data-search">

                    <div class="col-md-1">
                        <select class="formControls input-text" name="length">
                            <option value="10">10 条</option>
                            <option value="15">15 条</option>
                            <option value="20">20 条</option>
                            <option value="50">50 条</option>
                            <option value="100">100 条</option>
                        </select>
                    </div>

                    <div class="form-group col-md-2">
                        <input id="start_time" class="formControls input-text"
                               name="start_time"
                               placeholder="开始时间"></div>
                    <div class="form-group col-md-2">
                        <input id="end_time" class="formControls input-text"
                               name="end_time" placeholder="结束时间">
                    </div>
                    <div class="form-group col-md-2">
                        <button type="submit" class="btn btn-primary" onclick="setMyDate('now')">本期</button>
                        <button type="submit" class="btn btn-primary" onclick="setMyDate('prev')">上期</button>
                    </div>

                    <div class="form-group col-md-2">
                        <input class="formControls input-text" placeholder="搜索"
                               name="search[value]"
                               value=""></div>
                    <div class="form-group col-md-2">
                        <button type="submit" class="btn btn-primary">搜索</button>
                        <button type="button" class="btn btn-warning" onclick="exportData()"
                                onfocus="layer.tips('请先选择多少条后再进行导出')">导出
                        </button>
                    </div>

                </form>
            </div>

            <table id="data-list" class="table table-border table-bordered table-bg table-hover">
                <thead>
                <tr class="text-c">

                    <th>游戏ID</th>
                    <th>游戏</th>
                    <th>日期</th>
                    <th>销售总量</th>
                    <th>销售金额</th>
                    <th>销售笔数</th>
                    <th>单笔销售</th>
                    <th>回收总量</th>
                    <th>回收金额</th>
                    <th>回收笔数</th>
                    <th>单笔回收</th>
                    <th onmouseover="layer.tips('回收率',this)">Kvv指数</th>
                </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                <tr>
                    <td colspan="12" class="c-red info1" style="font-size: 18px;font-weight: bold"></td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="charts" style="width: 100%;height:500px;margin-top: 50px"></div>

        <div id="dataZoomX"></div>
    </div>
</block>

<block name="script">
    <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
    <script src="__PUBLIC__/Lib/datatables/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('charts'));
        var option = {
            title: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: []
            },
            grid: {
                bottom: '10%',
                containLabel: true
            },
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter'
                }
            ],
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar','stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        laydate({
            elem: '#start_time', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });
        laydate({
            elem: '#end_time', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        var search = {};

        var table;

        $("#code-search").submit(function () {
            $("#logo").fadeOut();
            $(".search").animate({
                "top": "10px"
            });
            search.mask = $(this).find("input").val();
            table = $('#data-list').on('xhr.dt', function (e, settings, json, xhr) {
                $(this).find("tfoot td").text(json.ext ? ('销售总量：' + json.ext.sell_sum / 100000000 + '亿 回收总量：' + json.ext.recycle_sum / 100000000 + '亿。' + json.ext.kvv_exp ? (json.ext.sell_info + json.ext.kvv_info) : '暂无数据可供分析') : '选择时间段后可进行数据分析');
            }).dataTable({
                order: [[2, 'desc']],
                processing: true,
                serverSide: true,
                searching: false,
                lengthChange: false,
                destroy: true,
                ajax: {
                    url: '',
                    data: function (data) {
                        return $.extend(data, search);
                    }
                },
                columns: [
                    {data: 'game_user'},
                    {data: 'game'},
                    {data: 'date'},
                    {data: 'sell'},
                    {
                        data: 'sell_money',
                        render: function (data) {
                            return Math.round(data * 100) / 100 + '元';
                        }
                    },
                    {data: 'sell_count'},
                    {
                        data: 'sell_exp',
                        render: function (data) {
                            return parseInt(data) + '元'
                        },
                        "createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
                            $(cell).hover(function () {
                                layer.tips(rowData.sell_info, cell);

                            }, function () {
                                layer.closeAll();
                            })
                        },
                        orderable: false
                    },
                    {data: 'recycle'},
                    {
                        data: 'recycle_money',
                        render: function (data) {
                            return Math.round(data * 100) / 100 + '元';
                        }
                    },
                    {data: 'recycle_count'},
                    {
                        data: 'recycle_exp',
                        render: function (data) {
                            return parseInt(data) + '元'
                        },
//                        "createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
//                            $(cell).hover(function () {
//                                layer.tips(rowData.recycle_info, cell);
//
//                            },function () {
//                                layer.closeAll();
//                            })
//                        },
                        orderable: false
                    },
                    {
                        data: 'kvv_exp',
                        "createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
                            $(cell).hover(function () {
                                layer.tips(rowData.kvv_info, cell);

                            }, function () {
                                layer.closeAll();
                            })
                        },
                        render: function (data) {
                            return Math.round(data * 100) / 100;
                        },
                        orderable: false
                    }
                ],
                createdRow: function (row, data, dataIndex) {
                    var legendIndex = $.inArray(data.game_user, option.legend.data)
                    if (-1 === legendIndex) {
                        option.legend.data.push(data.game_user)
                        legendIndex = option.series.push({
                                name: data.game_user,
                                type: 'line',
                                smooth: true,
                                data: [],
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }) - 1
                    }
                    var xAxisIndex = $.inArray(data.date, option.xAxis.data);
                    if (-1 === xAxisIndex) {
                        xAxisIndex = option.xAxis.data.push(data.date) - 1
                    } else {
//                        console.log(legendIndex)
                    }
//                    console.log(legendIndex)

                    option.series[legendIndex].data[xAxisIndex] = data.sell
//                    console.log(data)
                },
                preDrawCallback: function () {
//                    console.log(option)
                    myChart.setOption(option);
                },
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "未找到数据",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }

                }
            }).api();
            return false;
        });
        $("#data-search").submit(function () {
            $("#logo").fadeOut();
            $(".search").animate({
                "top": "10px"
            });
            $.each($(this).serializeArray(), function (i, item) {
                search[item.name] = item.value;
            });
            if (table) {
                table.page.len(search.length);
                table.draw();
            }
            return false;
        });
        function formatDate(d) {
            var D = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'];
            return d.getFullYear() + '-' + (d.getMonth() < 10 ? D[d.getMonth()] : d.getMonth() + 1) + '-' + (d.getDate() < 10 ? D[d.getDate() - 1] : d.getDate());
        }
        var d = new Date();

        function setMyDate(type) {
            var start_date;
            var end_date;
            var start = $('#start_time');
            var end = $('#end_time');
            switch (type) {
                case 'now':
                    d = new Date();
                    end.val(formatDate(d));
//                  计算本期开始时间
                    start_date = parseInt(d.getDate() / 10) * 10 + 1;
                    d.setDate(start_date);
                    start.val(formatDate(d));

                    break;
                case 'prev':

                    end_date = parseInt(d.getDate() / 10) * 10;

                    d.setDate(end_date);

                    end.val(formatDate(d));

                    //计算上开始时间
                    start_date = parseInt(d.getDate() / 10 - 1) * 10 + 1;
                    if (d.getDate() == 28 || d.getDate() == 29) {
                        start_date += 10;
                    }


                    d.setDate(start_date);

                    start.val(formatDate(d));
                    break;
                default:
                    break;
            }
        }

        function exportData() {
            var parseParam = function (param, key, encode) {
                if (param == null) return '';
                var paramStr = '';
                var t = typeof (param);
                if (t == 'string' || t == 'number' || t == 'boolean') {
                    paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param);
                } else {
                    for (var i in param) {
                        var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '[' + i + ']');
                        paramStr += parseParam(param[i], k, encode);
                    }
                }
                return paramStr;
            };

            if (table) {
                window.open(table.ajax.url() + '?export=true' + parseParam(table.ajax.params()))

            }
        }

    </script>
</block>
